<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Hzl
 * @LastEditTime: 2021-09-22 19:02:23
-->
<template>
  <div ref='root' style="height:150px">
    
  </div>
</template>

<script>
import { Bar } from '@antv/g2plot';
export default {
  data(){
    return{

    }
  },
  mounted(){
    this.initCharts();
  },
  methods:{
    initCharts(){
      const data = [
        { year: '第一季度', value: 38 },
        { year: '第二季度', value: 52 },
        { year: '第三季度', value: 61 },
        { year: '第四季度', value: 145 },
      ];
      let bar = new Bar(this.$refs['root'],{
        data,
        xField: 'value',
        yField: 'year',
        seriesField: 'year',
        legend: {
          position: 'top-left',
        },
      });
      //渲染
      bar.render();
    }
  }
}
</script>